<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>DemoWreck</title>
<link type="text/css" rel="stylesheet" href="NewFile.css?p=1"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/custom-theme/jquery-ui-1.8.20.custom.css"/>  



<script type="text/javascript">
var playbackBuffer = null;
var context;

window.addEventListener('load', init, false);
function init() {
  try {
    context = new webkitAudioContext();
  }
  catch(e) {
    alert('Web Audio API is not supported in this browser, Get chrome');
  }
}
$(function(){

var tabs = $('#toolbar').tabs({ fx: { opacity: 'toggle' }, spinner: "Retrieving data..."});
});
$(document).ready(function() {
	
	$("#gettune").click(function() {
		  var request = new XMLHttpRequest();
		  var choice = "yourmum" + $(this).val();
		  request.open('GET', "/serve?blobkey=" + choice, true);
		  request.responseType = 'arraybuffer';
		  request.onload = function() {
		    context.decodeAudioData(request.response, function(playbackBuffer) {
		    
		    playSound(playbackBuffer)
		   });
		  }
		  request.send();
				
	});	
		
});

    
    function playSound(buffer) {
	  var source = context.createBufferSource(); // creates a sound source
	  source.buffer = buffer;                    // tell the source which sound to play
	  source.connect(context.destination);       // connect the source to the context's destination (the speakers)
	  source.noteOn(0);                          // play the source now
    }
    
$('#toolbar').bind('tabsselect', function(event, ui) {

	$(ui.tab).html("adfjdjnsdjnljsdnlsndljsdnlsv")

    // Objects available in the function context:
    //ui.tab      anchor element of the selected (clicked) tab
   // ui.panel    element, that contains the selected/clicked tab contents
   // ui.index    zero-based index of the selected (clicked) tab

});
    
</script>
</head>
<body>
	<div id="main">
	<div id="toolbar">
		<ul>
			<li ><a href="#att"><span>add track</span></a></li>
			<li ><a href="#arr"><span>arrange</span></a></li>
			<li ><a href="#mix"><span>mix</span></a></li>
			<li ><a href="#exp"><span>export</span></a></li>
		</ul>
		<div id="att">Welcome, upload sounds to your track
			<div id="uploadbox">
				<iframe src="/uploadmodule.jsp"></iframe>
			</div>
		</div>
		<div id="arr">Play a sound 		
			<button id="gettune">Demotracks</button>
			<table class="seqeuncegraph">
				<tbody>
				<tr><th></th><th>1</th><th>2</th><th>3</th><th>4</th></tr>
				<tr><td class="td_frist"></td><td></td><td></td><td></td><td></td></tr>
				</tbody>
			</table>
		</div>
		<div id="mix">polish your tune</div>
		<div id="exp">take a copy of your creation</div>
	
		<div id="title">
			<h1></h1>
			<p id="mine"></p>
			
		</div>
	</div>
	
	

	</div>
	
</body>
</html>
